<template>
  <div class="reservation">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>预约</span>
      </a>
    </header-top>
    <div class="reservation_content_list">
      <div class="reservation_content">
        <div class="success_message">
          <div>预约成功！</div>
          <div>您的预约码：2015233409070</div>
        </div>
      </div>
    </div>
    <div class="content_footer">
      <p>温馨提示：预约码可以在“我的发·现 - 我的预约”里查看</p>
      <x-button type="primary" style="margin-top: 15px;" @click.native="$router.push('/msite')">继续逛逛</x-button>
    </div>
  </div>
</template>

<script>
  import {XButton} from 'vux'
  import HeaderTop from '../../../components/HeaderTop/HeaderTop'

  export default {
    name: "ReservationSuccess",
    components: {
      HeaderTop,
      XButton,
    }
  }
</script>

<style scoped>
  .reservation {
    overflow-y: hidden;
  }

  .reservation_content_list {
    margin-top: 58px;
    margin-bottom: 10px;
  }

  .reservation_content {
    margin: 0 10px;
    background-color: #fff;
    border: 1px solid #ffdccd;
    border-radius: 3px;
  }

  .success_message {
    height: 80px;
    text-align: center;
    font-size: 18px;
    color: #ff6633;
    padding-top: 40px;
  }

  .content_footer {
    margin: 10px 25px;
  }

  .content_footer p {
    font-size: 14px;
    color: #a0a0a0;
  }
</style>
